<!DOCTYPE html>
<html ng-app="MyAPP">
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-bottom:1px solid #1b926c;
        }
        /*.navbar{*/
            /*border:1px solid #1b926c;*/
            /*background-color: #1fa67a;*/
        /*}*/

    </style>
</head>
<body>

 <div class="container">
     <div ng-include src="'../common/header.html'"></div>
     <div class="row demo">
         <h3>Demo1: 字符串显示</h3>
         <h5>输出：Hello {{'AngularJS'}}</h5>
     </div>
     <div class="row demo">
         <h3>Demo2: ng-model使用</h3>
         <p>Your Name:<input type="text" ng-model="yourname" placeholder="Your Name"/></p>
         <h5>输出：Hello {{yourname||'AngularJS'}}</h5>
     </div>
     <div class="row demo">
         <h3>Demo3: 字符串合并</h3>
         <h5>输出：String Expression:{{'Awsome '+'FEI'}}</h5>
     </div>
     <div class="row demo">
         <h3>Demo3: 表达式计算</h3>
         <h5>输出：Number Expression:{{1+5}}</h5>
     </div>
     <div class="row demo">
         <h3>Demo4: ng-init使用</h3>
         <button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow" class="btn">Flip the shouldShow variable</button>
         <div ng-show="shouldShow">
             <h3>Showing {{ shouldShow }}</h3>
         </div> <div ng-hide="shouldShow">
         <h3>Hiding {{ shouldShow }}</h3>
     </div>
         <div class="row demo">
             <h3>Demo5: ng-repeat示例</h3>
             <ul>
                 <li ng-repeat="num in [1,2,3,4,5,6]">{{num}}</li>
             </ul>
             <br>
             <div ng-controller="HelloController">
                 <p ng-repeat="(name,color) in peopleAndColorList">
                     <b>{{name}}</b><span style="display: inline-block;width:300px;padding:10px;margin-left:20px;background:{{color}};">{{color}}</span>
                 </p>
             </div>
         </div>
 </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var app=angular.module("MyAPP",[]);
    app.controller("HelloController",function($scope){
        $scope.peopleAndColorList = {
            '张三': 'tomato',
            '李四': 'red',
            '王武': 'green'
        }
    });
</script>
